<template>
  <el-config-provider :locale="language === 'zh-cn' ? elementZhLocale : elementEnLocale" :key="language === 'zh-cn' ? 'zh-cn' : 'en'">
    <router-view />
  </el-config-provider>
</template>
 
<script lang="ts">
import appStore from "@/pinia";
import elementZhLocale from 'element-plus/es/locale/lang/zh-cn'
import elementEnLocale from 'element-plus/es/locale/lang/en'
 
export default defineComponent({
  setup() {
    // 因为我这里只有两种语言,如果你的语种比较多,可以把element-plus的语种放入数组中遍历,通过elementZhLocale.name去匹配输出
    // el-config-provider应该是有bug,切换语种的时候组件内部的子组件语种不会随之刷新,所以必须要上key强制刷新组件.
 
    const language = computed(() => (appStore.appModule.language))
 
    return {
      language,
      elementZhLocale,
      elementEnLocale,
    }
  }
})
</script>
 
<style>
html,body,#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
</style>
 